<template>
  <div id="pageBox">
    <div class="boxLeft boxPublic">
      <div class="headerNav">
        <ul>
          <li
            :class="{ active: gActive == 1 }"
            @click="
              () => {
                gActive = 1;
              }
            "
          >
            组件
          </li>
          <li
            :class="{ active: gActive == 2 }"
            @click="
              () => {
                (gActive = 2), loadTemplate();
              }
            "
          >
            模版
          </li>
          <li
            :class="{ active: gActive == 3 }"
            @click="
              () => {
                (gActive = 3), changes();
              }
            "
          >
            历史记录
          </li>
          <!-- <li :class="{'active':gActive==4}"
              @click="()=>{gActive=4,get_single_list()}">子页面库</li> -->
        </ul>
      </div>
      <div class="bx scrollbars">
        <div v-show="gActive === 1">
          <div class="title">组件库-拖拽使用</div>
          <div class="compon">
            <div
              v-for="(every, i) in allvice"
              :key="i"
              class="componItem comF"
              style="position: relative"
            >
              <img
                v-if="every.img"
                :src="every.img"
                :draggable="every.draggable"
                @mouseover="lipushover(i)"
                @dragstart="dragstarthandle(every, `origin${i}`, $event)"
              />

              <img
                v-if="
                  every.isShow == true &&
                    every.draggable == false &&
                    every.type == 26
                "
                src="http://oss.ztwlxx.cn/jinz.png"
                class="comF"
                style="position: absolute;top: 0;left:0;"
                @mouseout="lipushout()"
              />
              <p v-if="every.text">{{ every.text }}</p>
            </div>
          </div>
          <div class="pagination">
            <el-pagination
              background
              :page-size="15"
              layout="pager,jumper"
              :total="filterArrs.length"
              @current-change="alldPageChanges"
            >
            </el-pagination>
          </div>
        </div>
        <div v-show="gActive === 2">
          <div class="title">模版库-点击使用</div>
          <div class="template clearfix">
            <div
              v-for="(item, index) in listTemplate"
              :key="index"
              class="templateItem"
            >
              <p>{{ item.template_name }}</p>
              <img :src="item.imgs" alt="" style="height: 133px;" />
              <p @click="itemTemplate(item.json)">点击使用</p>
            </div>
          </div>
          <div class="pagination">
            <el-pagination
              :pager-count="7"
              :page-size="9"
              layout="pager,jumper"
              :total="pageLength"
              @current-change="loadTemplate"
            >
            </el-pagination>
          </div>
        </div>
        <!-- <el-button style="padding: 8px 28px;margin-left: 32px;">清空历史记录</el-button> -->
        <div v-show="gActive === 3">
          <div class="title">历史库-点击恢复</div>
          <div
            class="template clearfix"
            style="background: #FFFFFF; border: 1px solid #DED6DE;  width: 420px; margin:0 0 30px 32px; height:520px;padding:0;overflow: hidden;"
          >
            <div
              v-for="(item, index) in listHistory"
              :key="index"
              class="historyItem"
            >
              <div>{{ item.timeStar }}</div>
              <div>{{ item.timeEnd }}</div>
              <div>
                <el-button
                  style="border-radius:0;  width: 100%;height: 100%;"
                  type="primary"
                  @click="restore(item.json)"
                  >恢复</el-button
                >
              </div>
              <p></p>
            </div>
          </div>
          <div class="pagination">
            <el-pagination
              :page-size="10"
              layout="pager,jumper"
              :total="totals"
              @current-change="changes"
            >
            </el-pagination>
          </div>
        </div>
        <!-- <div 
             v-show="gActive===4">
          <div class="title">子页面库-点击使用</div>
          <div class="template clearfix"
           >
            <div class="templateItem"
                 v-for="(item,index) in childPageList"
                 :key="index">
              <p style=" height: 22px;">{{item.jump_name}}</p>
              <img :src="$store.state.qiniu +'/'+ item.template_cover" alt="">
              <img src="http://oss.ztwlxx.cn/defaulttemplateico.png"
                   alt="">
              <p @click="restore(item.json)">点击使用</p>
            </div>
          </div>
          <div class="pagination">
            <el-pagination @current-change="childPageChanges"
                           :page-size="9"
                           layout="pager,jumper"
                           :total="totalsChild">
            </el-pagination>
          </div>
        </div>
        <div class="panelLeft"
             v-show="gActive===4">
          <div class="pageNav">
            <div class="item"
                 v-for="(page,pagenum)  in Object.keys(pages)"
                 :key="pagenum"
                 @click="changepage(page)"
                 :style="{color: page==nowpage? 'blue' :''}">第{{+page+1}}页{{page==nowpage?'（正在编辑）':''}}</div>
          </div>
        </div> -->
      </div>
    </div>
    <div class="boxLeft boxCenter boxPublic ">
      <div class="headerNav">
        <div class="button">
          <el-tooltip
            class="item"
            effect="light"
            content="扫码浏览"
            placement="top"
          >
            <el-button size="medium" @click="publish">预览</el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="light"
            content="同步编辑器内容至线上版本"
            placement="top"
          >
            <el-button size="medium" @click="upTag">同步上线</el-button>
          </el-tooltip>
          <!-- <el-tooltip class="item"
                      effect="light"
                      content="保存到子页面库"
                      placement="top">
            <button @click="upTag">保存子页面</button>
          </el-tooltip>
          <el-tooltip class="item"
                      effect="light"
                      content="保存模板"
                      placement="top">
            <button @click="saveTemplateShowTag">保存模板</button>
          </el-tooltip> -->
        </div>
      </div>
      <!-- <div class="panel">
        <div class="panelRight"> -->
      <div class="bx scrollbars">
        <div class="container">
          <div class="button"></div>
          <div style="height:100%;width: 375px;overflow: hidden; ">
            <div
              class="drag-box scrollbarsNO"
              @dragover.prevent="dragoverhandle($event)"
              @drop.self="drophandle($event)"
            >
              <img
                :src="Images.phoneHeader"
                draggable="false"
                ondragstart="return false;"
                class="headimg"
              />
              <list-item
                v-for="(item, index) in draglist"
                :key="index"
                :item="item"
                :alleclect="allvice"
                :index="index"
                :draglist.sync="draglist"
                :class="[checknum == index ? 'active' : '', 'drag-item']"
                :dargs-flage-sort="dargsFlageSort"
                @select="select"
                @dargsFlageSortFun="dargsFlageSortFun"
              ></list-item>
            </div>
          </div>
          <!-- </div>
        </div> -->
        </div>
      </div>
    </div>
    <div class="boxRight boxPublic">
      <div class="headerNav">
        <ul>
          <li>组件设置</li>
          <li v-if="checknum > -1" class="last">
            {{ draglist[checknum].text }}
          </li>
        </ul>
      </div>
      <div class="panel scrollbars">
        <!--轮播组件-->
        <lunbo-tool
          v-if="checknum > -1 && draglist[checknum].type === 34"
          :data-json="draglist[checknum]"
          @dragstartListSort="dragstartListSort"
          @dropListSort="dropListSort"
          @showdialog="showdialog"
          @chooseLink="chooseLink"
          @alertTag="alertTag"
        />
        <!--文字模块-->
        <font-tool
          v-if="checknum > -1 && draglist[checknum].type === 35"
          :data-json="draglist[checknum]"
        />

        <!--商品模块-->
        <shop-tool
          v-if="checknum > -1 && draglist[checknum].type === 11"
          :data-json="draglist[checknum]"
          @alertTag="alertTag"
          @dragstartListSort="dragstartListSort"
          @dropListSort="dropListSort"
        />
        <!--优惠券-->
        <coupon-tool
          v-if="checknum > -1 && draglist[checknum].type === 15"
          :data-json="draglist[checknum]"
          @alertTag="alertTag"
          @dragstartListSort="dragstartListSort"
          @dropListSort="dropListSort"
        />
        <!--店铺头部-->
        <header-tool
          v-if="checknum > -1 && draglist[checknum].type === 17"
          :data-json="draglist[checknum]"
          @alertTag="alertTag"
        />
        <!--标题栏-->
        <title-tool
          v-if="checknum > -1 && draglist[checknum].type === 19"
          :data-json="draglist[checknum]"
          @alertTag="alertTag"
          @chooseLink="chooseLink"
        />
        <!--搜索-->
        <search-tool
          v-if="checknum > -1 && draglist[checknum].type === 20"
          :data-json="draglist[checknum]"
          @alertTag="alertTag"
        />
        <!--图片导航-->
        <image-tool
          v-if="checknum > -1 && draglist[checknum].type == 21"
          :data-json="draglist[checknum]"
          @alertTag="alertTag"
          @showdialog="showdialog"
          @chooseLink="chooseLink"
        />
        <!--图文列表-->
        <image-text-tool
          v-if="checknum > -1 && draglist[checknum].type == 22"
          :data-json="draglist[checknum]"
          @alertTag="alertTag"
          @showdialog="showdialog"
          @chooseLink="chooseLink"
        />
        <!--分类导航-->
        <class-nav-tool
          v-if="checknum > -1 && draglist[checknum].type == 23"
          :data-json="draglist[checknum]"
          @alertTag="alertTag"
          @showdialog="showdialog"
          @chooseLink="chooseLink"
        />
        <!--空白模块-->
        <white-tool
          v-if="checknum > -1 && draglist[checknum].type == 24"
          :data-json="draglist[checknum]"
          @alertTag="alertTag"
        />
        <!--限时秒杀-->
        <limit-tool
          v-if="checknum > -1 && draglist[checknum].type == 25"
          :data-json="draglist[checknum]"
          @alertTag="alertTag"
          @deleteCurItem="deleteCurItem"
          @dragstartListSort="dragstartListSort"
          @dropListSort="dropListSort"
          @deleteShopIdItems="deleteShopIdItems"
          @etimes="etimes"
          @add="add"
        />
        <!--拼团商品-->
        <spell-group-tool
          v-if="checknum > -1 && draglist[checknum].type == 26"
          :data-json="draglist[checknum]"
          @alertTag="alertTag"
          @deleteCurItem="deleteCurItem"
          @dragstartListSort="dragstartListSort"
          @dropListSort="dropListSort"
          @deleteShopIdItems="deleteShopIdItems"
          @etimes="etimes"
          @add="add"
        />

        <!--砍价商品-->
        <bargain-tool
          v-if="checknum > -1 && draglist[checknum].type == 27"
          :data-json="draglist[checknum]"
          @alertTag="alertTag"
          @deleteCurItem="deleteCurItem"
          @dragstartListSort="dragstartListSort"
          @dropListSort="dropListSort"
          @deleteShopIdItems="deleteShopIdItems"
          @etimes="etimes"
          @add="add"
        />
        <!-- 视频 -->
        <video-tool
          v-if="checknum > -1 && draglist[checknum].type == 28"
          :data-json="draglist[checknum]"
          @alertTag="alertTag"
          @showdialog="showdialog"
        />
        <!-- 底部导航tabBar -->
        <tab-Bar-tool
          v-if="checknum > -1 && draglist[checknum].type == 29"
          :data-json="draglist[checknum]"
          @alertTag="alertTag"
          @chooseLink="chooseLink"
        />
        <!--文章模块-->
        <!-- <article-tool v-if="checknum>-1&&draglist[checknum].type==30"
          :dataJson='draglist[checknum]'
          /> -->
        <!--地址模块-->
        <address-tool
          v-if="checknum > -1 && draglist[checknum].type == 31"
          :data-json="draglist[checknum]"
          @alertTag="alertTag"
        />
        <!-- -->
      </div>
    </div>
    <!-- <el-dialog title="保存模板"
               :visible.sync="templates.dialogShow"
               width="30%">
      <el-form>
        <el-form-item label="模板名称">
          <el-input v-model="templates.name"
                    auto-complete="off"
                    style="width:80%;margin-bottom:20px;"></el-input>
        </el-form-item>
        <el-form-item label="模板封面">
          <div class="commodityImage clearfix">
            <div class="icon">
              <img :src="templates.image"
                   alt="" />

            </div>
            <el-button @click="templateImageShow"
                       type="primary"
                       style="padding: 5px;">选择封面</el-button>
          </div>
        </el-form-item>
      </el-form>

      <div slot="footer"
           class="dialog-footer">
        <el-button @click="templates.dialogShow = false"
                   style="padding: 10px;">取 消</el-button>
        <el-button type="primary"
                   @click="saveTemplateTag"
                   style="padding: 10px;">确 定</el-button>
      </div>
    </el-dialog> -->
    <Alert
      :alert-flage="alertFlage"
      :flages="flages"
      :type="checknum > -1 ? draglist[checknum].type : -1"
      @alertChange="alertChange"
    />
    <alert-link :dialog-form-visible="dialogFormVisible" @linked="linked" />
    <images-material
      :dialog-images="dialogImages"
      :use-btn="true"
      :use-type="'all'"
      @close="closeImages"
    />
  </div>
</template>
<script>
import {
  GETAUTH,
  GETTEMPLATELIST,
  SAVEQ,
  RELEASELIST,
  SAVEMODEL,
  ONLINE
} from "./service";
import API from "@/utils/request";
import config from "@/utils/config";

import components from "./component/indexs";

import { all, tabBar, Images } from "./data";

const url = config.proxy.apiHost;
export default {
  components,
  data() {
    return {
      dargsFlageSort: true, // list-Item.vue拖拽锁
      alertFlage: false,
      pages: { 0: [], 1: [] }, // 多少张页面，
      nowpage: 0, // 正在编辑第几个页面
      draglist: [], // 最终的组件列表
      listTemplate: [],
      childPageList: [],
      listHistory: [],
      allvice: [],
      all, // 能点击的type列表
      tabBar,
      Images,
      sixz: 0,
      checknum: -1, // 选中的组件
      activeLink: 0,
      dialogFormVisible: false,
      dialogImages: false, // 弹出框

      gActive: 1, // 组件button变蓝
      lunboIndex: 0, // 轮播选中第n个图
      pageLength: 0,
      historyPages: 0,
      childPageListpages: 0,
      totals: 0,
      totalsChild: 0,
      pinType: 0,

      filterArrs: [],
      flages: 0,

      templates: {
        dialogShow: false,
        soft: false,
        image: Images.templatesImage,
        name: ""
      }
    };
  },
  watch: {
    pinType: {
      handler: function(v) {
        if (v === 1) {
          this.allvice[12].draggable = false;
        } else {
          this.allvice[12].draggable = true;
        }
      },
      deep: false
    }
  },
  created() {
    this.all.forEach(ele => {
      ele.filters.filter(() => {
        this.filterArrs.push(ele);
      });
    });
    this.filterArrs.forEach((ele, i) => {
      if (i < 15) {
        this.allvice.push(ele);
      }
    });
    this.$store.commit("spellGroupIndex", 0);
    this.$store.commit("limitIndex", 0);
    this.$store.commit("bargainIndex", 0);
    this.init();
  },
  methods: {
    alldPageChanges(page) {
      this.allvice = this.filterArrs.slice((page - 1) * 15, page * 15);
    },
    times(timestamp) {
      var time = new Date(timestamp * 1000);
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var date = time.getDate();
      var hours = time.getHours();
      var minutes = time.getMinutes();
      var seconds = time.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
    restore(e) {
      let JsonArr = JSON.parse(e);
      this.draglist = JsonArr.ext.styles[0].index.elements;
    },
    childPageChanges(page) {
      this.childPageListpages = page;
      this.get_single_list();
    },
    // ??????
    // changepage (i) {
    //   this.pages[this.nowpage] = JSON.parse(JSON.stringify(this.draglist))
    //   this.draglist = this.pages[i]
    //   this.nowpage = i
    //   this.checknum = -1
    // },
    dragstartListSort(index, e) {
      e.dataTransfer.setData("datalist", index);
    },
    dropListSort(index, e, attr, type, superiorIndex) {
      let getIndex = e.dataTransfer.getData("datalist");
      if (type === 26 || type === 25) {
        const sotItem = this.draglist[this.checknum]["dataArr"][superiorIndex][
          attr
        ][getIndex];
        this.draglist[this.checknum]["dataArr"][superiorIndex][attr].splice(
          getIndex,
          1
        );
        this.draglist[this.checknum]["dataArr"][superiorIndex][attr].splice(
          index,
          0,
          sotItem
        );
      } else {
        const sotItem = this.draglist[this.checknum][attr][getIndex];
        this.draglist[this.checknum][attr].splice(getIndex, 1);
        this.draglist[this.checknum][attr].splice(index, 0, sotItem);
      }
    },
    lipushover(e) {
      if (e === 12) {
        this.allvice[12].isShow = true;
      }
    },
    lipushout() {
      this.allvice[12].isShow = false;
    },
    dragstarthandle(item, index, e) {
      e.dataTransfer.setData("dataFa", index);
      this.dargsFlageSort = false;
    },
    dragoverhandle() {},
    drophandle(e) {
      if (e.dataTransfer.getData("dataFa")) {
        var getIndex = e.dataTransfer.getData("dataFa");

        if (getIndex.length < 5) {
          this.draglist.push(
            JSON.parse(JSON.stringify(this.draglist[getIndex]))
          );
          this.draglist.splice(getIndex, 1);
          return;
        }
        const i = getIndex.substring(6);
        this.draglist.push(JSON.parse(JSON.stringify(this.allvice[i])));
        let shus = JSON.parse(JSON.stringify(this.allvice[i]));
        if (shus.text == "拼团商品") {
          this.pinType = 1;
        }
      }
    },
    select(item, i, lock) {
      if (lock) {
        if (item.type === 26) {
          this.pinType = 0;
        }
        if (this.draglist.length === i + 1) {
          this.checknum = i - 1;
          return;
        }
      }
      this.checknum = i;
    },
    dargsFlageSortFun(flag) {
      if (!flag) {
        this.pinType = 1;
      } else {
        this.dargsFlageSort = flag;
      }
    },

    alertTag(alertFlage, flages) {
      this.alertFlage = alertFlage;
      this.flages = flages;
    },
    alertChange(i) {
      if (typeof i === "number") {
        this.draglist[this.checknum].stylesType = i;
        let arr = this.draglist[this.checknum];
        if (arr.type === 26 && arr.stylesType === 0) {
          this.draglist[this.checknum].dataArr.forEach(ele => {
            if (ele.shopId.length > 1) ele.shopId = [ele.shopId[0]];
          });
        }
      }
      this.alertFlage = false;
    },
    chooseLink(i) {
      this.activeLink = i;
      this.dialogFormVisible = true;
    },
    showdialog(i) {
      this.lunboIndex = i;
      this.dialogImages = true;
      this.templates.soft = false;
    },
    closeImages(file) {
      this.dialogImages = false;
      if (!file) return;
      if (this.templates.soft) {
        this.templates.image = this.$store.state.qiniu + file.file_path;
      } else {
        if (file.file_type === "1") {
          const imgSrc = this.$store.state.qiniu + file.file_path;
          this.draglist[this.checknum].imgUrls[this.lunboIndex].src = imgSrc;
        } else {
          const videos = this.$store.state.qiniu + file.file_path;
          this.draglist[this.checknum].imgUrls[0].videoUrls = videos;
          this.draglist[this.checknum].imgUrls[0].videoName = file.file_name;
        }
      }
    },
    add() {
      this.draglist[this.checknum].dataArr.push(
        JSON.parse(JSON.stringify(this.draglist[this.checknum].dataArr[0]))
      );
    },
    deleteCurItem(i) {
      this.draglist[this.checknum].dataArr.splice(i, 1);
    },

    etimes(arr) {
      this.draglist[this.checknum].dataArr = arr;
    },

    deleteShopIdItems(i, type, superiorIndex) {
      if (i === "all") {
        this.draglist[this.checknum].dataArr[superiorIndex].shopId = [];
      } else {
        this.draglist[this.checknum].dataArr[superiorIndex].shopId.splice(i, 1);
      }
    },

    async init() {
      await GETAUTH().then(({ code, data }) => {
        if (code === 200) {
          if (data !== "") {
            let listData = JSON.parse(data.json).ext;
            if (listData.styles[0].index.elements.length > 0) {
              this.draglist = listData.styles[0].index.elements;
              // this.draglist = [];
              this.draglist.forEach(ele => {
                if (ele.type === "shopBanner") {
                  ele.type = 34;
                }
                if (ele.type === "shopText") {
                  ele.type = 35;
                }
                if (ele.type === 1) {
                  ele.type = 34;
                }
                if (ele.type === 2) {
                  ele.type = 35;
                }
                if (ele.type === 29) {
                  this.sixz = 1;
                }
                if (ele.type === 26) {
                  this.pinType = 1;
                }
              });
            }
          }
        } else {
          // this.$message.error(msg);
        }
        if (this.sixz !== 1) {
          this.draglist.push(this.tabBar);
        }
      });
      // console.log(this.draglist)
    },
    async history_list() {
      const param = {
        page: this.historyPages,
        pageshow: 10
      };
      await API("user/template/history_list", param).then(({ data }) => {
        this.totals = data.length;
        data.list.forEach(ele => {
          ele.create_at = this.times(ele.create_at);
          let k = ele.create_at.indexOf(" ");

          let T = {
            timeStar: ele.create_at.slice(0, k),
            timeEnd: ele.create_at.slice(k)
          };
          Object.assign(ele, T);
        });
        this.listHistory = data.list;
      });
    },
    async get_single_list() {
      const param = {
        page: this.childPageListpages,
        pageshow: 9
      };
      await API(`${url}/wechat/authorize/get_single_list`, param).then(
        ({ data }) => {
          this.totalsChild = data.length;
          this.childPageList = data.list;
        }
      );
    },

    editValue() {
      let dataJson = JSON.parse(JSON.stringify(this.draglist));
      dataJson.forEach(item => {
        delete item.img;
        delete item.filters;
        switch (item.type) {
          case 17:
            item.title = this.$store.state.app_name;
            item.guoxinLogo =
              this.$store.state.qiniu + this.$store.state.app_cover;
            break;
        }
      });
      // console.log(dataJson)
      let obj = {
        extEnable: true,
        extAppid: this.$store.state.wx_appid,
        directCommit: false,
        ext: {
          styles: [
            {
              index: {
                elements: dataJson,
                app_id: this.$store.state.app_id,
                wx_appid: this.$store.state.wx_appid,
                app_name: this.$store.state.app_name
              }
            }
          ]
        }
      };
      return obj;
    },
    async upTag() {
      let obj = this.editValue();
      await SAVEMODEL({
        json: JSON.stringify(obj)
      });
      await ONLINE({
        json: JSON.stringify(obj)
      }).then(() => {
        this.$message({
          message: "上线成功",
          type: "success"
        });
      });
    },
    childTagName() {
      this.$prompt("请输子页面名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(({ value }) => {
        if (value == null) {
          this.$message({
            message: "子页面名称不能为空",
            type: "error"
          });
        } else {
          this.childTag(value);
        }
      });
    },
    childTag(naem) {
      let obj = this.editValue();
      let param = {
        template_name: naem,
        json: JSON.stringify(obj)
      };
      API(`${url}/wechat/authorize/create_single`, param).then(() => {
        this.$message({
          message: "保存成功",
          type: "success"
        });
      });
    },
    // d÷?÷÷÷≥≥≤≤?????
    itemTemplate(json) {
      this.draglist = JSON.parse(json);
    },
    async loadTemplate(page) {
      const param = {
        page: page || 1,
        pageshow: 9
      };
      await GETTEMPLATELIST(param).then(({ data }) => {
        this.listTemplate = data.list;
        this.pageLength = data.length;
      });
    },
    changes(page) {
      this.historyPages = page;
      this.history_list();
    },
    templateImageShow() {
      this.dialogImages = true;
      this.templates.soft = true;
    },
    saveTemplateShowTag() {
      this.templates.dialogShow = true;
    },
    async saveTemplateTag() {
      this.templates.dialogShow = false;
      let obj = this.editValue();
      await SAVEQ({
        imgs: this.templates.image,
        json: JSON.stringify(obj),
        template_name: this.templates.name
      }).then(() => {
        this.$message({
          message: "模板保存成功",
          type: "success"
        });
      });
    },
    async publish() {
      let obj = this.editValue();
      const param = {
        json: JSON.stringify(obj)
      };
      await RELEASELIST(param).then(({ data }) => {
        this.$notify({
          title: "扫码预览",
          message:
            "<img src =" +
            this.$store.state.qiniu +
            data +
            " width='100' height='100' />",
          dangerouslyUseHTMLString: true,
          duration: 30000
        });
      });
    },

    linked(value) {
      if (value) {
        let arr = this.draglist[this.checknum];
        if (arr.type === 19) {
          arr.jump_url = value.jump_url;
          arr.jump_name = value.jump_name;
        } else {
          Object.assign(arr.imgUrls[this.activeLink], value);
        }
        this.draglist[this.checknum] = arr;
      }
      this.dialogFormVisible = false;
    }
  }
};
</script>
<style lang="scss">
#pageBox {
  height: calc(100vh - 86px);
  div {
    box-sizing: border-box;
  }
  button {
    max-width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>
<style lang="scss" scoped>
#pageBox {
  display: flex;
  flex-wrap: nowrap;
  .boxPublic {
    border-radius: 6px;
    // overflow: hidden;
    height: calc(100vh - 100px);
    background-color: #eaeaea;
    .headerNav {
      width: 100%;
      background-color: #fff;
      .button {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
      }
      li {
        cursor: pointer;
        display: inline-block;
        height: 50px;
        line-height: 50px;
        /* width: 76px; */
        padding: 0 20px;
        text-align: center;
        font-size: 19px;
        color: #595961;
      }
      .active {
        border-bottom: 2px solid #2f85ff;
      }
    }
  }
  .boxLeft {
    width: 27%;

    .bx {
      height: calc(100vh - 152px);
      padding-bottom: 16px;
      .title {
        font-size: 16px;
        color: #595961;
        text-align: center;
        padding: 42px 0;
      }
      .pagination {
        text-align: center;
      }
      .compon {
        height: 600px;
        margin-bottom: 34px;
        padding: 0 15px;
        .componItem {
          width: 135px;
          height: 110px;
          float: left;
          margin: 5px;
          border: 1px solid #ccc;
          background-color: #fff;
          border-radius: 6px;
          overflow: hidden;
          cursor: pointer;
          img {
            width: 100%;
          }
          p {
            text-align: center;
            font-size: 12px;
            color: #595961;
          }
        }
      }

      .template {
        padding: 0 15px;
        height: 630px;
        .templateItem {
          width: 135px;
          float: left;
          margin: 5px;
          border: 1px solid #ccc;
          background-color: #fff;
          border-radius: 6px;
          overflow: hidden;
          p:first-child {
            border-bottom: 1px solid #ccc;
          }
          p:last-child {
            background-color: #2f85ff;
            color: #fff;
            cursor: pointer;
          }
          img {
            width: 100%;
            padding: 5px;
            display: block !important;
          }
        }
        p {
          text-align: center;
          color: #595961;
          font-size: 14px;
          line-height: 22px;
        }
      }

      .historyItem {
        width: 100%;
        height: 51px;
        margin-bottom: 1px;
        &:nth-of-type(odd) {
          background: #f5f5f5;
        }
        div {
          height: 50px;
          float: left;
          line-height: 50px;
          text-align: center;
        }
        div:nth-child(1) {
          width: 30%;
          font-size: 14px;
          color: #585860;
        }
        div:nth-child(2) {
          width: 54%;
          font-size: 12px;
          color: #cfcecd;
          text-align: left;
          padding-left: 10px;
        }
        div:nth-child(3) {
          width: 16%;
          font-size: 14px;
          color: #ffffff;
        }
        p {
          border: 1px solid #ffffff;
          width: 100%;
          height: 1px;
          float: left;
        }
      }
    }
  }
  .boxCenter {
    width: 36%;
    margin: 0 10px;
    .bx {
      height: calc(100vh - 152px);
      .container {
        width: 376px;
        margin: 0 auto;
        position: relative;
        .button {
          padding: 34px 0;
          text-align: center;
          display: flex;
          justify-content: space-around;
        }
        .drag-box {
          width: 372px;
          border: 1px solid #dbdbdb;
          border-radius: 6px;
          height: 668px;
          padding-top: 54px;
          background-color: #f5f5f5;
          text-align: left;
          padding: 64px 0 70px 0;
          .headimg {
            position: absolute;
            top: 68px;
            z-index: 999;
            width: 370px;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
          }
        }
      }
    }
  }
  .boxRight {
    width: 36%;
    .panel {
      width: 100%;
      height: calc(100vh - 152px);
      padding: 16px;
    }
  }
}
</style>
